FormToggle: refine animation #56515
Merged
FormToggle: refine animation #56515
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ciampo
added
[Type] Enhancement
|
Size Change: +115 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
brookewp
approved these changes
Nov 25, 2023
t-hamano
approved these changes
Nov 26, 2023
There was a problem hiding this comment.
It's working as expected even in Windows' high contrast mode 👍
Additionally, trunk had a small dot in the center of the thumb when the control is unchecked, which is resolved with this PR. The reason is that the border width has been changed from 5px to 6px.
trunk
trunk.mp4
This PR
pr.mp4
richtabor
reviewed
Nov 26, 2023
Comment on lines
6
to
7
| $transition-duration-color: 0.2s; | ||
| $transition-duration-position: 0.1s; |
There was a problem hiding this comment.
Any reason why these shouldn't be the same 0.2 value?
There was a problem hiding this comment.
Here it is with 0.2s on both:
Area.mp4
There was a problem hiding this comment.
No reason, I kept the same transition durations as currently on trunk while refactoring the code slightly. Happy to have all durations be the same — 0.2s or any other value that you would recommend (Brooke suggested 0.3s)
There was a problem hiding this comment.
I went ahead and updated all transitions to have the same duration (0.2s). I'll go ahead and merge this PR, but I'm happy to iterate further in a follow-up if we need to make further tweaks
ciampo
force-pushed
the
feat/toggle-form-improve-animation
branch
from
228f3e0
to
aa82396
Compare
|
Flaky tests detected in aa82396. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7034490479
|
| border: 5px solid $gray-900; // Has explicit border to act as a fill in Windows High Contrast Mode. | ||
|
|
||
| // Transparent border acts as a fill in Windows High Contrast Mode. | ||
| border: $thumb-size / 2 solid transparent; |
There was a problem hiding this comment.
This appears to be throwing a deprecation warning when building the plugin locally. I ran out of time today to put up a quick fix, but just thought I'd mention it:
There was a problem hiding this comment.
I think you can do this, to enable the SASS:
border: #{ $thumb-size / 2 } solid transparent;
That will make the calculation in the sass part of things, instead of the CSS part of things.
There was a problem hiding this comment.
Oh wait, I might be wrong. The other option is to do $thumb-size * 0.5 — I think it's because the slash is now also used for some grid CSS properties, so it's not good as a math operator anymore.
There was a problem hiding this comment.
Right! I'll spin up a PR to implement @jasmussen 's suggestion. Thank you!
There was a problem hiding this comment.
The official recommendation is to @use "sass:math". So in theory, this...
border: math.div($thumb-size, 2) solid transparent;
derekblank
pushed a commit
that referenced
this pull request
Dec 7, 2023
* ToggleForm: refine animation * CHANGELOG * Use same transition duration for both color and position-based styles
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Improve the animation and the high-contrast mode styles for
FormTogglecomponent, which is also used in theToggleControlcomponentWhy?
In the current version of the component, the track border and the thumb color are not animated when the toggle is flipped.
An improved animation gives a better sense of polish to the component and the UI in general.
Improvements to how the component is rendered in High Contrast mode benefit assistive technology users.
How?
By applying a few tweaks to
FormToggle's styles:Testing Instructions
FormToggleandToggleControlstorybook examplesFormToggleorToggleControlScreenshots or screencast
toggle-form.mp4